<template>
  <div id="app">
    <transition :name="transitionName">
    <keep-alive include="order">
      <routerView class="transitionBody"></routerView>
    </keep-alive>
    </transition>
    <div class="shade" v-if="windowWidth>500">
        <div class="des">
          请将手机竖屏
        </div>
      </div>
      <div class="loading" v-if="$store.state.isShowLoading">
        <van-loading color="#ff0000"></van-loading>
      </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      transitionName: 'transitionLeft',
      windowWidth:0
    }
  },
  methods:{
    fun(){
      this.windowWidth = document.documentElement.clientWidth 
    }
    
  },
  mounted(){
    this.fun()
    window.onresize = () => {
      this.fun()
      console.log(this.windowWidth);
    }
  },
  watch: {
    '$route'(to, from) {
        const arr = ["/cart", "/myAddress","/newAddress", "/classify", "/order","/detail","/dian","/my","/collect","/loginCode","/loginUser", "/getCoin","/everyday","/play","/TmallPage","/TogetherPage",'/TogetherPage','/GoodsPage','/CustomerPage',"/zhu",'/mysearch','/tmcarPage','/newcar','/fenlei','/msCard',"/localfood"]
        this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
    }
}

   
}
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

img {
    vertical-align: top;
}

input,
textarea {
    outline: none;
    border: 0;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}
body {
    background: #f5f5f5;
}
// 路由过度
.transitionBody{
 transition: all 0.4s ease-out;
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.transitionLeft-enter-active,
.transitionRight-enter-active {  //防止过渡时元素抖动
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.shade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    background-color: #000c;
    color: #fff;
    // display: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading {
  position: absolute;
  top: 50%;
  right: 41%;
  transform: translate(-50%,-50%);
  z-index: 999999999999;
}
</style>